<script setup lang="ts">
import {ref} from 'vue'

import http from '../../utils/http.ts'

import {FormInst, NButton, useMessage} from 'naive-ui'
import {Close} from '@vicons/carbon'

const message = useMessage()

const emit = defineEmits(['saved'])


const rules = ref({
  title: {
    required: true,
    message: '请输入标题',
    trigger: 'blur',
  },
  content: {
    required: true,
    message: '请输入内容',
    trigger: ['blur'],
  },
  sort: {
    required: true,
    message: '请输入排序',
    trigger: ['blur'],
  },
})

const advertEmptyObject = {
  title: '',
  content: '',
  status: false,
  sort: '',
}

const advert = ref<Advert | AdvertItem>({...advertEmptyObject})

const modalTitle = ref('')
const modalShow = ref(false)

async function init(id = 0) {
  modalShow.value = true
  if (id) {
    modalTitle.value = '修改广告'
    const res = await http<AdvertItem>({
      url: `/advert/info/${id}`,
    })
    advert.value = res.data
    advert.value.sort = advert.value.sort.toString()
  } else {
    modalTitle.value = '新增广告'
    advert.value = {...advertEmptyObject}
  }
}

defineExpose({
  init,
})

const formRef = ref<FormInst | null>(null)

function formValidateAndSave(e: MouseEvent) {
  e.preventDefault()
  formRef.value?.validate((errors) => {
    if (errors) {
      console.log(errors)
      message.error('请按格式要求输入数据！')
    } else {
      save()
    }
  })
}

async function save() {
  if ((advert.value as AdvertItem).id) {
    await http({
      url: '/advert/update',
      method: 'POST',
      data: advert.value,
    })
  } else {
    await http({
      url: '/advert/save',
      method: 'POST',
      data: advert.value,
    })
  }
  message.success('保存成功')
  modalShow.value = false
  emit('saved')
}
</script>

<template>
  <n-modal v-model:show="modalShow" :mask-closable="false">
    <n-card
        style="width: 600px"
        :title="modalTitle"
        :bordered="false" size="huge"
        role="dialog" aria-modal="true"
    >
      <template #header-extra>
        <n-icon size="30" @click="modalShow=false">
          <Close/>
        </n-icon>
      </template>

      <n-form ref="formRef"
              :model="advert" :rules="rules"
              :label-width="80" label-placement="left"
              require-mark-placement="right-hanging"
      >
        <n-form-item label="标题" path="title">
          <n-input v-model:value="advert.title" placeholder="输入标题"/>
        </n-form-item>
        <n-form-item label="内容" path="content">
          <n-input
              v-model:value="advert.content"
              placeholder="输入内容"
              type="textarea"
              :autosize="{minRows: 3,maxRows: 5}"
          />
        </n-form-item>
        <n-form-item label="排序" path="sort">
          <n-input v-model:value="advert.sort" placeholder="输入排序"/>
        </n-form-item>

        <div class="modalButtons">
          <n-button type="default" @click="modalShow=false">取消</n-button>
          <n-button type="success" @click="formValidateAndSave">保存</n-button>
        </div>
      </n-form>

      <template #footer>
        <!--尾部-->
      </template>
    </n-card>
  </n-modal>
</template>

<style scoped lang="stylus">
$margin-size = 20px

.modalButtons
  display flex
  justify-content flex-end

  > *:nth-of-type(2)
    margin-left $margin-size
</style>